@import '../../../app/mixins.css';

.onboarding {
  background-color: var(--color-onboarding-bg);
  border-radius: var(--border-radius-standard);
  box-sizing: border-box;
  color: var(--color-white);
  display: flex;
  margin-top: 32px;
  overflow: hidden;
  position: relative;
  height: 400px;
  width: 100%;

  & .illustrations {
    bottom: 0;
    height: calc(100% - 45px);
    position: absolute;
    right: 6%;
    width: 50%;
    z-index: 0;

    & > img {
      bottom: 0;
      max-height: 100%;
      max-width: 100%;
      opacity: 0;
      position: absolute;
      right: 0;
      transform: translateX(-100%);
      transition:
        transform var(--animation-speed-slow) linear,
        opacity var(--animation-speed-fast) linear;
      will-change: transform, opacity;

      &.active {
        opacity: 1;
        transform: translateX(0);
        transition:
          transform var(--animation-speed-slow) cubic-bezier(0.17, 0.65, 0.33, 0.88),
          opacity var(--animation-speed-standard) linear calc(var(--animation-delay-standard) * 1.5);
      }

      &.active ~ img {
        transform: translateX(100%);
        transition:
          transform var(--animation-speed-standard) linear,
          opacity var(--animation-speed-fast) linear;
      }
    }
  }

  & .bullets {
    display: flex;

    & > span {
      background-color: transparent;
      border: 1px solid var(--color-slate-gray);
      border-radius: 50%;
      display: block;
      height: 6px;
      margin-right: 10px;
      width: 6px;

      &:last-child {
        margin-right: 0;
      }
    }

    & > .active {
      background-color: var(--color-ultramarine-blue);
      border-color: var(--color-ultramarine-blue);
    }
  }

  & .closeBtn {
    align-items: center;
    border: 1px solid var(--color-slate-gray);
    border-radius: var(--border-radius-box);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: center;
    margin-left: auto;
    right: 30px;
    position: absolute;
    top: 30px;
    width: 32px;
    z-index: 10;

    &::before,
    &::after {
      background-color: var(--color-strong-white);
      content: '';
      height: 11px;
      position: absolute;
      width: 1px;
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }
  }

  & .content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-basis: 45%;
    height: 100%;
    padding: 50px;
    z-index: 1;
  }

  & .slides {
    flex-grow: 1;
    height: 100%;
    position: relative;

    & > section {
      box-sizing: border-box;
      display: flex;
      height: 100%;
      flex-direction: column;
      left: 0;
      opacity: 0;
      position: absolute;
      transform: translateX(-100%);
      transition:
        transform var(--animation-speed-slow) linear,
        opacity var(--animation-speed-fast) linear;
      top: 0;
      will-change: transform, opacity;

      &.active {
        opacity: 1;
        transform: translateX(0);
        transition:
          transform var(--animation-speed-slow) cubic-bezier(0.17, 0.65, 0.33, 0.88),
          opacity var(--animation-speed-standard) linear calc(var(--animation-delay-standard) * 1.5);
      }

      &.active ~ section {
        transform: translateX(100%);
        transition:
          transform var(--animation-speed-standard) linear,
          opacity var(--animation-speed-fastest) linear;
      }
    }

    & p {
      @mixin contentLargest;

      line-height: 25px;
      margin: 0;
      color: var(--color-strong-white);
    }

    & h1 {
      @mixin headingLarge;

      margin: 30px 0;
      color: var(--color-strong-white);
    }
  }

  & .buttonsHolder {
    display: flex;

    & > button {
      margin-right: 16px;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

@media (--medium-viewport) {
  .onboarding {
    & .illustrations {
      display: none;
    }

    & .content {
      flex-basis: 100%;
    }
  }
}
